<template>
  <div class="login-container">
    <div
      class="login-content"
      :style="{
        boxShadow: `var(--el-box-shadow-dark)`,
      }"
    >
      <div class="login-title">后台管理系统</div>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        inline
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="账号" prop="LoginName">
          <el-input
            v-model.trim="ruleForm.LoginName"
            placeholder="请输入账号"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="密码" prop="LoginPwd">
          <el-input
            v-model.trim="ruleForm.LoginPwd"
            placeholder="请输入密码"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item class="login">
          <el-button
            type="primary"
            @click="submitForm(ruleFormRef)"
            :loading="isLoading"
            >登录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <div class="tip">
    <div class="tip-title">测试账号:</div>
    <div class="content"><span> 账号(有权限)：</span>Admin</div>
    <div class="content"><span>账号(无权限)：</span>Login</div>
    <div class="content"><span>密码：</span>123456</div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { ElMessage, FormInstance, FormRules } from "element-plus";
import { useStore } from "vuex";
import { useRoute, useRouter } from "vue-router";
import api from "../API";

const stoer = useStore();
const route = useRoute();
const router = useRouter();
const ruleFormRef = ref<FormInstance>();
const isLoading = ref(false);

const ruleForm = reactive({
  LoginName: "",
  LoginPwd: "",
});

const rules = reactive<FormRules>({
  LoginName: [
    { trigger: "blur", required: true, message: "账号不能为空" },
    { min: 3, max: 8, message: "账号数需要在3~8位之间", trigger: "blur" },
  ],
  LoginPwd: [
    { trigger: "blur", required: true, message: "密码不能为空" },
    { min: 5, max: 12, message: "密码数需要在5~12位之间", trigger: "blur" },
  ],
});

const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl || isLoading.value) return;
  formEl.validate(async (valid) => {
    if (valid) {
      isLoading.value = true;
      try {
        const { msg, data } = await api.Login({
          LoginName: ruleForm.LoginName,
          LoginPwd: ruleForm.LoginPwd,
        });
        await stoer.dispatch("getHomeData");
        stoer.dispatch("Login", data);

        const path = route.query.redirect ? route.query.redirect + "" : "/";
        router.push(path);
        ElMessage.success(msg);
        isLoading.value = false;
      } catch (error) {
        ElMessage.error(error.msg);
        isLoading.value = false;
      }
    } else {
      ElMessage.error("请输入正确的账号或密码");
      return false;
    }
  });
};
</script>

<style lang="less" scoped>
.login-container {
  background-color: #f9f9f9;
  height: 100vh;
  width: 100%;
  position: relative;
  .login-content {
    position: absolute;
    width: 500px;
    padding: 20px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 20px;
    .login-title {
      margin-bottom: 30px;
      text-align: center;
      font: bolder 4em Poppins, sans-serif;
      transition: all 5s ease;
      background: -o-linear-gradient(
        left,
        #2a9cf5,
        #6bdef5,
        #a5d060,
        #00ba90,
        #2a9cf5
      );
      background: -webkit-linear-gradient(
        left,
        #2a9cf5,
        #6bdef5,
        #a5d060,
        #00ba90,
        #2a9cf5
      );
      -webkit-background-clip: text;
      -moz-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      -webkit-animation: dancingColors 5s infinite forwards ease-in-out;
      animation: dancingColors 5s infinite forwards ease-in-out;
    }
  }
}
.tip {
  padding: 10px;
  position: fixed;
  right: 20px;
  top: 20px;
  & > div {
    border-bottom: 1px solid #eee;
    margin-bottom: 10px;
    span {
      font-size: 12px;
    }
  }
  .tip-title {
    font-size: 20px;
  }
}

@-webkit-keyframes dancingColors {
  50% {
    background-position: -860px;
  }
}

@keyframes dancingColors {
  50% {
    background-position: -860px;
  }
}
</style>
